import React from 'react'
import {Modal,Button,Table,Upload,message} from 'antd'
import {getPicList,delPic} from '../../api/index'
import './style.css'

const { confirm } = Modal;

class Swiper extends React.Component {
  constructor(params) {
    super()
    this.state = {
      visible:false,
      dataSource:[],
      count:20,
      loading:false,
    }
  }


  handleDel=(record)=>{
    confirm({
      title: '删除?',
      content: '确认删除本条信息？',
      onOk:() =>{
        delPic({
          _id:record._id
        }).then(res=>{
          if(res.data.data.delDBRes.deleted > 0){
            message.success('删除成功')
          }else{
            message.error('删除失败')
          }
          this.setState({
            dataSource:[]
          });
          this.getList()
        })
      },
      onCancel() {},
    });
  }
  handleCancel=()=>{
    this.setState({
      visible: false,
    });
  }
  componentWillMount() {
    this.getList()
  }

  componentDidMount() {
    
  }

  getList=()=>{//获取歌单列表
    this.setState({
      loading:true
    })
    getPicList().then(res=>{
      this.setState({
        dataSource:res.data.data,
        loading:false
      })
    })
  }
  fileChange=(info)=> {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
      this.getList()
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  }

  

  render() {
    const columns = [
      {
        title: '轮播图',
        dataIndex: '',
        key:'img',
        render:(record)=> <img src={record.download_url} alt="" style={{height:'50px'}}/>
      },
      {
        title: '操作',
        dataIndex: '',
        render: (text, record) => <a onClick={()=>this.handleDel(record)}>删除</a>,
      }
    ];
    const props = {
      name: 'file',
      action: 'http://localhost:8080/swiper/upload',
      headers: {
        authorization: 'authorization-text',
      },
      showUploadList:false,
    };

    return (
      <div className=''>
        <div className='container'>
          <Upload {...props} onChange={this.fileChange}>
            <Button type = "primary">
               上传图片
            </Button>
          </Upload>
          <Table className='noPadingRow' 
          loading={this.state.loading} 
          dataSource={this.state.dataSource} 
          rowKey={record=>record.id}
          columns={columns} pagination={false}/>
        </div>
      </div>
    )
  }
}

export default Swiper